<template>
    <view class="container">
        <!-- 骨架屏区域开始 -->
        <uv-skeletons :loading="userStore.profile ? false : true" :skeleton="skeleton"></uv-skeletons>
        <!-- 骨架屏区域结束 -->
        <template v-if="userStore.profile">
            <!-- 头像区域开始 -->
            <view class="avatar-wrap">
                <view class="avatar-left">
                    <view class="avatar-box">
                        <uni-file-picker
                            limit="1" 
                            :del-icon="false" 
                            disable-preview 
                            :imageStyles="imageStyles"
                            file-mediatype="image"
                            @select="uploadAvatar"
                        >
                            <image v-if="userStore.profile.user?.avatar_url" 
                                class="avatar" 
                                :src="global.FILE_DOMAIN + userStore.profile.user.avatar_url"
                            />
                            <image v-else class="avatar" src="/static/images/avatar.png"/>
                        </uni-file-picker>
                        <text class="txt">点击修改</text>
                    </view>

                    <view class="username-box">
                        <text v-if="userStore.profile.user?.username">{{userStore.profile.user.username}}</text>
                    </view>
                </view>

                <view class="avatar-right" v-if="userStore.profile.user?.avatar_url" @click="previewAvatar(global.FILE_DOMAIN + userStore.profile.user.avatar_url)">
                    <text>预览头像</text>
                    <text class="icon iconfont icon-youjiantou"></text>
                </view>
            </view>
            <!-- 头像区域结束 -->

            <view class="panel-wrap">

                <!-- 昵称 -->
                <view class="panel-item" @click="goto('/pagesUser/user_set/edit_nick')">
                    <text>昵称</text>
                    <view class="value">
                        <text v-if="userStore.profile.user?.nick">{{ userStore.profile.user.nick }}</text>
                        <text v-else>未设置</text>
                        <text class="icon iconfont icon-youjiantou"></text>
                    </view>
                </view>

                <!-- 手机号 -->
                <view class="panel-item" @click="goto('/pagesUser/user_set/edit_mobile')">
                    <text>手机号</text>
                    <view class="value">
                        <text v-if="userStore.profile.user?.mobile">{{ userStore.profile.user.mobile }}</text>
                        <text v-else>未设置</text>
                        <text class="icon iconfont icon-youjiantou"></text>
                    </view>
                </view>


                <!-- 邮箱 -->
                <view class="panel-item" @click="goto('/pagesUser/user_set/edit_email')">
                    <text>邮箱</text>
                    <view class="value">
                        <text v-if="userStore.profile.user?.email">{{ userStore.profile.user.email }}</text>
                        <text v-else>未设置</text>
                        <text class="icon iconfont icon-youjiantou"></text>
                    </view>
                </view>

                <!-- 地区 -->
                <view class="panel-item" @click="goto('/pagesUser/user_set/edit_region')">
                    <text>地区</text>
                    <view class="value">
                        <text v-if="userStore.profile.user?.region">{{ userStore.profile.user.region }}</text>
                        <text v-else>未设置</text>
                        <text class="icon iconfont icon-youjiantou"></text>
                    </view>
                </view>

                <!-- 其他信息 -->
                <view class="panel-item" @click="goto('/pagesUser/user_set/other_info')">
                    <text>其他信息</text>
                    <view class="value">
                        <text class="icon iconfont icon-youjiantou"></text>
                    </view>
                </view>

                <!-- 修改密码 -->
                <view class="panel-item" @click="goto('/pagesUser/user_set/change_password')">
                    <text>修改密码</text>
                    <view class="value">
                        <text class="icon iconfont icon-youjiantou"></text>
                    </view>
                </view>

                <!-- 版本 -->
                <view class="panel-item">
                    <text>版本</text>
                    <view class="value">
                        <text>1.0.0</text>
                        <text class="icon iconfont icon-youjiantou"></text>
                    </view>
                </view>
            </view>

            <view class="btn-wrap">
                <text class="btn" @click="handlerLogout">退出登录</text>
            </view>
        </template>
    </view>

    <uni-popup ref="popup">
		<view>
			<qf-image-cropper 
				:width="500" 
				:height="500" 
				:radius="250"
				:src="imageSrc"
				@crop="handlerCrop" />
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
import { inject, ref, reactive } from "vue"
import { goto } from '@/utils/tools'
import { useCommonStore, useUserStore } from '@/stores'
import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue'
import { websocket } from "@/utils/ws"


// ----------------- 定义全局变量开始 -----------------
// 全局属性
const global:any = inject('global')

// 用户存储
const userStore = useUserStore()

// 公共存储
const commonStore = useCommonStore()
// ----------------- 定义全局变量结束 -----------------



// ----------------- 定义骨架变量开始 -----------------
// 定义骨架参数
const skeleton = reactive([
    {
        type: 'flex',
        num: 1,
        style: 'marginBottom: 20rpx;padding: 0 5rpx;align-items: center;',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 100rpx;height:100rpx;border-radius: 50rpx;'
            },
            {
                type: 'custom',
                num: 1,
                style: 'width: 160rpx;height:40rpx;margin-left: 10rpx;'
            },
            {
                type: 'custom',
                num: 1,
                style: 'width: 160rpx;height:40rpx;margin-left: 280rpx;'
            },
        ]
    },
    10,
    {
        type: 'line',
        num: 1,
        style: 'height:2rpx;'
    },
    {
        type: 'flex',
        num: 5,
        style: 'marginBottom: 20rpx;padding: 30rpx 5rpx;align-items: center;justify-content: space-between;border-bottom: 2rpx dashed #ccc;',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 160rpx;height:40rpx;margin-left: 10rpx;'
            },
            {
                type: 'custom',
                num: 1,
                style: 'width: 160rpx;height:40rpx;'
            },
        ]
    },

    {
        type: 'flex',
        num: 1,
        style: 'padding: 30rpx 5rpx;align-items: center;justify-content: center;',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 600rpx;height:100rpx;border-radius: 2rpx;'
            }
        ]
    }
])
// ----------------- 定义骨架变量结束 -----------------



// -------------- 头像裁剪、上传功能开始 --------------
// 上传头像样式
const imageStyles = ref(
	{
		width: 64,
		height: 64,
	}
)

// 弹层
const popup = ref()

// 图片源地址
const imageSrc = ref('')

// 处理裁剪
const handlerCrop = (e:any) => {
	// 显示加载
	uni.showLoading({
		title: '头像上传中...'
	})
		
	// 上传头像
	uni.uploadFile({
		url: global.UPLOAD_FILE_API,
		filePath: e.tempFilePath,
		name: 'image',
		success: async (res) => {
			let result = JSON.parse(res.data) //返回的是字符串，需要转成对象格式
			if (result.status_code != 200) {
				uni.showToast({
					title: result.message,
					icon: "none"
				})
			} else {
				await userStore.modifyAvatar({avatar_url: result.data.relative_url})
				uni.showToast({
					title: '修改头像成功',
					duration: 1000
				})

                setTimeout(() => {
                    // 隐藏加载
                    uni.hideLoading()

                    // 关闭弹层
                    popup.value.close()
                    uni.switchTab({ url: '/pages/me/index' })
                }, 1000)
			}
		},
		fail: (error) => {
            // 隐藏加载
            uni.hideLoading()

            // 关闭弹层
            popup.value.close()
		} 
	})
}

// 上传头像
const uploadAvatar = (e:any) => {
	imageSrc.value = e.tempFilePaths[0]
	popup.value.open()
}
// -------------- 头像裁剪、上传功能结束 --------------



// ----------------- 预览头像功能开始 -----------------
const previewAvatar = (avatar:any) => {
	uni.previewImage({
		urls: [avatar]
	})
}
// ----------------- 预览头像功能结束 -----------------



// ----------------- 退出登录功能开始 -----------------
const handlerLogout = () => {
    uni.showModal({
	    content: '确定要退出吗?',
        confirmColor: global.THEME_COLOR,
	    success: async (res) => {
	        if (res.confirm) {
                // 清空用户信息
		        userStore.clearProfile()

                // 清空聊天对象列表
                commonStore.clearChatTargetList()

                // 清空未读消息数量
                commonStore.clearUnreadNotifyTotal()

                // 清空好友申请数量
                commonStore.clearFriendApplyTotal()

                // 清空地区
                commonStore.clearRegion()

                // 清空最新通知
                commonStore.clearNewestNotify()

                uni.showToast({
                    title: '退出成功',
                    duration: 1000
                })

                // 关闭ws连接
                websocket.value?.close()

                // 跳转
                setTimeout(() => {
                    // 跳转登录页面
                    uni.navigateTo({url: '/pages/password_login/index'})
                }, 1000)
	        }
	    }
	})
}
// ----------------- 退出登录功能结束 -----------------
</script>

<style scoped lang="scss">
.container {
    background-color: #fff;
    padding: 20rpx 20rpx 0 20rpx;

    // 头像区域开始
    .avatar-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
        border-bottom: 2rpx solid #f2f1f1;
        .avatar-left {
            display: flex;
            align-items: center;
            .avatar-box {
                display: flex;
                flex-direction: column;
                align-items: center;
                overflow: hidden;

                .avatar {
                    width: 94%;
                    height: 94%;
                    margin-bottom: 8rpx;
                    margin-top: 10rpx;
                    border-radius: 100%;
                }
                .txt {
                    color: $uni-color-primary;
                    font-size: 24rpx;
                }
            }
            .username-box {
                font-size: 32rpx;
                font-weight: bold;
                padding-left: 10rpx;
            }
        }
        .avatar-right {
            color: #C1BBBB;
        }
    }

    // 属性项
    .panel-wrap {
        .panel-item {
            display: flex;
            justify-content: space-between;
            height: 100rpx;
            line-height: 100rpx;
            border-bottom: 2rpx dashed #f2f1f1;
            &:last-child {
                border-bottom: 2rpx solid #f2f1f1;
            }
            .value {
                color: #C1BBBB;
            }
        }
    }

    // 退出按钮区域
    .btn-wrap {
        padding: 40rpx 0 20rpx 0;
        display: flex;
        justify-content: center;
        .btn {
            display: block;
            width: 600rpx;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            background-color: #CD0011;
            color: #fff;
            border-radius: 2rpx;
        }
    }
}
</style>